<template>
  <baidu-map class="bm-view"
    :scroll-wheel-zoom="true"
    :center="center" :zoom="zoom"
    @ready="handler"
    @dragend="dragMap"
    :style="{height: height+'px'}">
    <!-- 放大缩小控制组件 -->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"
    :offset="{width: 30,height: 20}"
    :enableGeolocation="true"></bm-navigation>
    <!-- 缩略图组件 -->
    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"
      :size="{width: 300,height: 300}">
    </bm-overview-map>
    <!-- 全景 -->
    <!-- <bm-panorama :offset="{width: 45,height: 250}"></bm-panorama> -->
    <!-- 自定义控件 -->
    <bm-control>
      <div style="margin: 20px;width: 380px;" class="btn-hover-green">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="name"
          placeholder="输入关键词检索企业"
          suffix-icon="el-icon-search"
          style="width: 300px;"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
        >
        <template slot-scope="{ item }">
          <div class="name">{{ item.enterpriseName }}</div>
          <span class="addr">{{ item.cityName }} {{item.enterpriseAddress}}</span>
        </template>
        </el-autocomplete>
        <el-tooltip class="item" effect="dark" content="前往企业列表" placement="right">
          <el-button type="default" icon="el-icon-more" @click="goList"></el-button>
        </el-tooltip>
      </div>
    </bm-control>
    <!-- 单点标记位置点 -->
    <!-- <bm-marker
      :position="{lng: 116.404, lat: 39.915, show: false}" :dragging="true"
      @mouseover="infoWindowOpen" @mouseout="infoWindowClose"
      animation="BMAP_ANIMATION_BOUNCE">
      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
        <event-card></event-card>
      </bm-info-window>
    </bm-marker> -->
    <!-- 多点 -->
    <bm-marker v-for="(marker, index) in ecs" :key="index"
      :position="marker" :dragging="false"
      @click="infosWindowOpen(marker)"
      animation="BMAP_ANIMATION_DROP">
      <bm-info-window :show="marker.show" @close="infosWindowClose(marker)" @open="infosWindowOpen(marker)" :width="330">
        <div style="margin: 10px;">
          <ec-card :info="selectEc" :is-map="true"></ec-card>
        </div>
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>


import EcCard from './EcCard'
import axios from 'axios'

  export default {
    title: '企业地图分布',
    name: 'ec-map',
    data () {
      return {
        selectEc: {},
        ecs: [],
        selectIndex: '', // 选中点的index
        center: {lng: 0, lat: 0},
        // center: '西安',
        zoom: 11,
        name: '',  // 搜索绑定
        restaurants: [], // 搜索结果列表
        show: false, // 地图点的显示窗体
        // markers: []
      }
    },
    mounted () {
      this.getAllEc()
    },
    methods: {
      getAllEc () {
        axios.post('/mscs/home/selectAllEnterpriseHomepageData').then(res => {
          if (res.data.code === 1) {
            this.orgData(res.data.data)
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      },
      orgData (arr) {
        arr.forEach(item => {
          this.ecs.push({
            lng: item.longitude,
            lat: item.latitude,
            show: false,
            tags: JSON.parse(item.tags),
            modelId: item.enterpriseId,
            basicTitle: item.enterpriseName,
            enterpriseName: item.enterpriseName,
            basicDescription: item.enterpriseSummary,
            basicThumbnails: item.enterpriseLogo,
            cityName: item.cityName,
            enterpriseAddress: item.enterpriseAddress

          })
        })
        this.restaurants = this.ecs
      },
      handler ({BMap, map}) {
        this.center.lng = 109.001
        this.center.lat = 34.300
        this.zoom = 12
      },
      // 搜索后点击的结果项
      handleSelect(item) {
        if (!item.lng) {
          return
        }
        this.center.lng = item.lng
        this.center.lat = item.lat
        this.zoom = 15
        item.show = true
        this.selectEc = item
      },
      // 根据输入框的内容，异步查询
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        if (results.length === 0) {
          results = [{enterpriseName: '没有匹配到相关企业'}]
        }
        cb(results);
      },
      // 清除状态过滤
      createStateFilter(queryString) {
        return (state) => {
          return (state.enterpriseName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      // 关闭显示窗体
      infosWindowClose (marker) {
        marker.show = false
      },
      // 打开显示窗体
      infosWindowOpen (marker) {
        marker.show = true
        this.selectEc = marker
      },
      goList () {
        this.$router.push({name: 'eclist'})
      },
      dragMap (type, target, pixel, point) {
        // this.center = type.point
      }
    },
    computed: {
      height () {
        return this.$store.state.height.client - this.$store.state.height.header
      }
    },
    components: {
      
      EcCard
    }
  }
</script>
<style lang="scss">
.bm-view {
  width: 100%;
  height: 800px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
